<script setup lang="ts">
import FightIcon from './icons/flightIcon.vue'
import GuaranteeIcon from './icons/guaranteeIcon.vue'
import OilseedsIcon from './icons/oilseedsIcon.vue'
import OrderIcon from './icons/orderIcon.vue'
import VehicleIcon from './icons/vehicleIcon.vue'
import UsageIcon from './icons/usageIcon.vue'
interface InfoItem {
  key: string;
  value: [string |  number | null];
}

interface Info {
  name: string;
  list: InfoItem[];
}

const props = defineProps({
  info: {
    type: Object as () => Info,
    default: () => {
      return {
        name: '默认标题',
        list: [
          {key: '<UNK>', value: '未知值'},
        ]
      }
    }
  },
  index: {
    type: Number,
    default: 0
  }
})

const icons = [
  'FightIcon',
  'GuaranteeIcon',
  'OrderIcon',
  'UsageIcon',
  'VehicleIcon',
  'OilseedsIcon',
]
</script>

<template>
  <div class="info">
    <h4 class="info_title">
      <el-icon :size="16" class="info_title_icon">
<!--        <component :is="icons[index]"></component>-->
        <FightIcon v-if="icons[index]==='FightIcon'" />
        <GuaranteeIcon v-if="icons[index]==='GuaranteeIcon'" />
        <OrderIcon v-if="icons[index]==='OrderIcon'" />
        <UsageIcon v-if="icons[index]==='UsageIcon'" />
        <VehicleIcon v-if="icons[index]==='VehicleIcon'" />
        <OilseedsIcon v-if="icons[index]==='OilseedsIcon'" />
      </el-icon>
      {{ info.name }}
    </h4>
    <ul class="info_content">
      <li v-for="(list, index) in info.list" :key="list.key + index">{{ list.key }}: <span class="info_content_value">{{ list.value }}</span></li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.info {
  width: 270px;
  height: 230px;
  background: #2a2c3b;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 10px 10px 12px #2a2c3b;
  display: inline-block;
  margin-right: 26px;
  vertical-align: top;

  &_title {
    height: 42px;
    line-height: 42px;
    background: #4e5ab1;
    border-radius: 8px 8px 0 0;

    &_icon{
      position: relative ;
      top: 2px;
    }
  }

  &_content {
    padding: 14px 29px 0 10px;

    & > li {
      height: 29px;
      line-height: 29px;
      text-align: left;
      border-bottom: 1px solid #3c3f54;
      white-space: nowrap;

      & > span{
        margin-left: 16px;
      }
    }
  }
}
</style>